html / css vocabulary flashcards
For this assignment, I was tasked with developing 35 flashcards that define coding terminology for HTML/CSS, as well as designing a home screen. The designs of the cards were required to be both cohesive and visually appealing. After crafting the cards, I transferred them to Adobe XD, making them into a functional application prototype.
Due to this being my second time using Adobe XD, I was eager to expand upon the knowledge of prototyping I had gained since my first assignment. It was daunting to think about prototyping 35 cards, but I found myself growing more comfortable as I completed this process. Although I designed the template in Adobe Illustrator, I only used XD when editing the terms, definitions, and sizes of the “window” they are in.
Because this assignment was intended to rely on typography more so than illustration or images, which I tend to implement in my designs, I was unsure of how to approach this project at first. I went through many ideas, but I found most of them to be plain and uninspired. However, upon reflecting on the purpose and functionality of these cards within the realm of HTML/CSS, I had the idea to create a design that was reminiscent of 2000s internet browsers.
lo-fi wireframe
During the research phase of this project, I found it difficult to find references for flashcards that did not follow the design system of an image on one side and a corresponding definition or term on the other. However, this repetition in layout made me realize that simple and accessible designs would be best for flashcards. Considering their primary purpose as learning tools, I concluded that excessive design elements would only serve to confuse and distract the user.
med-fi wireframe
My design was rather straightforward, and the creation of the base of my medium-fi wireframe was a relatively smooth process. However, I encountered a significant challenge regarding the sizing of the browser windows and text. I knew I needed them to be small enough to fit on a phone screen, but also big enough to fit terms and definitions of varying lengths. It necessitated multiple adjustments to resize the windows and font size until achieving dimensions that accommodated text lengths across all of the flashcards.
final design
As stated previously, most of my revisions were based around the size of the different elements. But, the browser window design, font choice, and palette remained more or less the same. Additionally, I had originally intended for the user to tab between the definition and example. However, I felt that it would cause too much empty space within the design due to the short stature of the browser window. Due to this, I included the examples in their own window.
In creating the structure of my flashcard deck, my aim was to provide a straightforward and intuitive path for the user. I ensured that users could easily navigate forward and backward through the flashcards, as well as direct back to the home screen no matter what term they were on. Additionally, I added the HTML and CSS buttons to the home screen, providing an easy way for users to choose between them without confusion.
design & prototyping
My components were kept to the basic buttons: forward, backward, and the home button. Because there is no other interaction aside from tapping the buttons and sliding up or down the flashcards, my components were few in number. I utilized character styles to ensure that my design system was carried across every card and that no font or point size changed without me realizing it.
I utilized my navigation map to aid me in pulling the wires. Creating the map before prototyping significantly reduced confusion and streamlined my workflow, resulting in a lot of time saved. I kept my cards relatively simple; I felt that any unnecessary animated transitions would distract from my design, and, because of the 2000s-reminiscent browser windows, I felt that they did not fit. I also did not utilize functions such as hover buttons because they do not work on a mobile phone, which these cards were designed for.
^ See how it works! ^
^ Try it for yourself! ^
It was a unique experience to utilize the character styles, which I had not done in the previous project I had done in XD. Additionally, I worked a lot more within XD this time, as opposed to my dashboard, wherein I only used the application to prototype and did all of my designing in Illustrator. This project was also a lesson in design not having to be exceedingly complicated to be pleasing to the eye.
